<template>
  <view class="content-card-v2" @click="toCourseInfo(item)">
    <view class="cont-card-top">
      <image :src="item.courseImg" mode="aspectFill"></image>
    </view>
    <view class="cont-card-bottom">
      <view class="w100">
        <h5 class="title">{{ item.courseName }}
		<view class="percentage">
			<img v-if="item.pace <= 3" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/0_9.png" alt="">
			<img v-else-if="3 < item.pace <= 10" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/1_9.png" alt="">
			<img v-else-if="10 < item.pace <= 22" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/2_9.png" alt="">
			<img v-else-if="22 < item.pace <= 35" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/3_9.png" alt="">
			<img v-else-if="35 < item.pace <= 47" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/4_9.png" alt="">
			<img v-else-if="47 < item.pace <= 59" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/5_9.png" alt="">
			<img v-else-if="59 < item.pace <= 71" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/6_9.png" alt="">
			<img v-else-if="71 < item.pace <= 83" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/7_9.png" alt="">
			<img v-else-if="83 < item.pace <= 95" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/8_9.png" alt="">
			<img v-else-if="95 < item.pace" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/9_9.png" alt="">
		</view>
			<!-- <view class="already-study">
			  已学：<text
				:class="
				  item.pace < 60 ? 'study-pace' : 'study-pace study-pace-color'
				"
			  >
				{{ (item.pace && item.pace.toFixed(2)) || 0 }}%
			  </text>
			</view> -->
		</h5>
      </view>
    </view>
    <!-- <image class="cardCoverImg" :src="item.courseCover" mode=""></image> -->
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {
    toCourseInfo(e) {
      this.$emit("goDetail", e);
    },
  },
};
</script>

<style scoped lang="scss">
.content-card-v2 {
  width: 263rpx;
  height: 355rpx;
  box-sizing: border-box;
  margin-right: 18rpx;
  border-radius: 20rpx;
  position: relative;
  box-shadow: 0rpx 3rpx 26rpx 0rpx rgba(206, 206, 206, 0.3);
  z-index: 2;
  overflow: hidden;
  background: #fff;
  .cont-card-top {
	  font-size: 0;
    image {
      width: 263rpx;
      height: 263rpx;
    }
  }
  .cont-card-bottom {
    padding: 11rpx 17rpx;
	height: 240rpx;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    .w100 {
      width: 100%;
    }
    .title {
      font-size: 28rpx;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: #111111;
      line-height: 38rpx;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
	.percentage{
			position: absolute;
			top: 314rpx;
			right: 20rpx;
			width: 40rpx;
			height: 40rpx;
			img{
				width: 100%;
				height: 100%;
			}
	}
	
    .cont-card-text {
      margin-top: 11rpx;
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #808080;
      line-height: 44rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .li_tag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 20rpx;
      & > view {
  
        
        
        &:nth-child(1) {
          font-size: 26rpx;
          color: #454545;
		  max-width: 60%;
		  display: -webkit-box;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  -webkit-line-clamp: 1;
		  line-clamp: 1;
		  -webkit-box-orient: vertical;
          & > text {
            color: #a0a0a0;
          }
        }
        &:nth-child(2) {
          font-size: 26rpx;
          color: #0f0f0f;
		  white-space: nowrap;
          & > text {
            color: #0fb53e;
          }
        }
      }
    }
  }
  .cardCoverImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 20rpx;
    opacity: 0.5;
    box-shadow: 0 0 4rpx #194FC9;
  }
}
</style>
